

<template>
  <!-- 弹窗区域-->
  <q-dialog :full-width="props.IsFullWidth" v-model="IsShowHistoryPop" :position="props.Pos as any"    no-backdrop-dismiss style="draggable:false">
    <div :class="props.ClassStr" class=" shadow-lg rounded-lg overflow-hidden" draggable="false">
      <!-- 标题栏 -->
      <div class="flex items-center justify-between px-3 py-2 bg-white">
        <h3 class="text-sm font-medium text-gray-800">{{props.title}}</h3>
        <button class="text-gray-600 hover:text-gray-800 focus:outline-none" @click="IsShowHistoryPop=false">
          <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24">
            <path
                d="M18.7,6.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L7.7,6.3c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l4.3,4.3l-4.3,4.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l4.3-4.3l4.3,4.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L13.4,12l4.3-4.3C19.1,7.3,19.1,6.7,18.7,6.3z"></path>
          </svg>
        </button>
      </div>

      <hr>
      <div class="m-1.5">
          <slot></slot>
      </div>
    </div>
  </q-dialog>

</template>
<script setup lang="ts">
import {defineExpose, defineProps, ref} from "vue"

let IsShowHistoryPop=ref(false)
let props=defineProps({
  title:{
    type:String,
    default:"弹窗"
  },
  ClassStr:{
    type:String,
    default:"w-5/6 bg-white"
  },
  IsFullWidth:{
    type:Boolean,
    default:false
  },
  Pos: {
    type: String,
   // required: true,
    default:"standard",
    validator: (value:string) => {
      return ['bottom', 'top', 'left', 'right', 'standard'].includes(value);
    }
  }
})
function ShowPop(){
  IsShowHistoryPop.value=true
}
function HidePop(){
  IsShowHistoryPop.value=false
}

defineExpose({ShowPop,HidePop})
</script>


<style scoped>

</style>